<template>
	<view class="register">
		<image src="../../../static/image/登录背景@2x.png" mode="widthFix"></image>
		<view class="content">
			<view class="row-input">
				<image src="../../../static/image/商户名称@2x.png" mode="widthFix"></image>
				<input placeholder="请输入商户名称" maxlength="110" />
			</view>
			<view class="row-input">
				<image src="../../../static/image/所属行业@2x.png" mode="widthFix"></image>
				<!-- <input placeholder="请选择所属行业" maxlength="100" /> -->
				<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
				<!-- </uni-section> -->
			</view>
			<view class="row-input">
				<image src="../../../static/image/地址@2x.png" mode="widthFix"></image>
				<input placeholder="请输入商户地址" maxlength="100" />
			</view>
			<view class="row-input">
				<image src="../../../static/image/姓名@2x.png" mode="widthFix"></image>
				<input placeholder="请输入姓名" maxlength="100" />
			</view>
			<view class="row-input">
				<image src="../../../static/image/手机号@2x.png" mode="widthFix"></image>
				<input placeholder="请输入手机号" maxlength="11" />
			</view>
			<view class="row-input">
				<image src="../../../static/image/验证码@2x.png" mode="widthFix"></image>
				<input placeholder="请输入验证码" maxlength="8" />
				<!-- <view class="code" :class="{forhidden: counter > 0}" @click="getCode">
					<text> {{ counter > 0 ? counter+ 'S后重新获取' : '获取验证码' }}</text>
				</view> -->
				<view class="yzminner" @click="sendCode" v-if="!verificationTime">
					获取验证码
				</view>
				<view class="yzminner" v-if="verificationTime">
					重新获取{{verificationTime}}s
				</view>
			</view>
			<view class="register-btn">立即注册</view>
			<view class="tip-link">
				<checkbox :checked="true" style="transform: scale(0.6);" color="var(--primary-color)" />
				<text>我同意并接受</text>
				<text class="link">《虚拟店长服务协议》</text>
			</view>
			<view class="bottom">
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		useCountDown
	} from '@/hooks/useCountDown'
	const {
		counter,
		startCountDown
	} = useCountDown()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const value = ref(-1)
	const range = ref([{
			value: 0,
			text: "餐饮"
		}
	])

	onLoad(() => {

	})

	onShow(() => {

	})
	const change = (e) => {
		console.log("e:", e);
	}
	const getCode = () => {
		if (counter.value > 0) {
			proxy.sjuAlert.showInfo('验证码已发送')
		} else {
			startCountDown(60)
		}
	}
	const sendCode = () => {
		console.log(mobile.value)

		let myreg = /^[1]\d{10}$/;
		if (!myreg.test(mobile.value)) {
			// this.$utils.msg("请输入移动手机号");
			proxy.sjuAlert.showInfo('请输入移动手机号', 2000)
		} else {
			verificationTime.value = 60
			verificationDown()
			proxy.sjuRequest.request("/api/weixin/sendCode/" + proxy.sjuConfig.appInfo.appId, 'post', {
				"mobile": mobile.value
			}).then(res => {
				console.log(res)
				if (res.code == "0000") {
					msgOrderNo.value = res.msgOrderNo;
				} else {
					proxy.sjuAlert.showError("验证码发送失败");
				}
			})
		}
	}
</script>

<style lang="scss">
	.register {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;

		image {
			width: 100%
		}
		::v-deep .uni-select{
			border:none;
			padding-left:20px;
		}
		::v-deep .uni-select__input-placeholder{
			font-size: 14px;
		}
		::v-deep uni-input{
			color: #0b0a34 !important;
		}
	}



	.content {
		padding: 40rpx;
		width: 94%;
		height: 500px;
		background: #FFFFFF;
		border-radius: 20rpx;
		// margin:0 3%;
		// margin-top:-20%;
		// z-index: 999;
		position: absolute;
		top: 50%;
		left: 3%;
		transform: translateY(-30%);

		.row-input {
			margin: 30rpx 0rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 20rpx;
			height: 90rpx;
			border: none;
			border-radius: 40rpx;
			background-color: #f6f7fb;

			image {

				width: 40rpx;

				flex-shrink: 0;
			}

			.iconfont {
				color: #d9d8dd;
				padding: 0rpx 10rpx 0rpx 10rpx;
				flex-shrink: 0;
				font-size: 40rpx;
			}

			input {
				flex: 1;
				font-size: 30rpx;
				padding: 0rpx 40rpx;
				color: #d9d8dd;
				// border-left: 3rpx solid var(--primary-color);
			}

			.code {
				display: flex;
				justify-content: flex-end;
				letter-spacing: 2rpx;
				width: 200rpx;
				color: #46aefd;
			}

			.forhidden {
				color: #CCCCCC;
			}

			.yzminner {
				padding: 0 5px;
				color: #0091ff;
				// background: ;
			}
		}

		.register-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
			height: 100rpx;
			margin: 40rpx 0 40rpx 0;
			border-radius: 50rpx;
			color: #FFFFFF;
			background-image: linear-gradient(to right, #1b196f, #0b0a34);
		}

		.tip-link {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			letter-spacing: 4rpx;
			font-size: 28rpx;

			.link {
				color: var(--primary-color);
			}

		}
	}

	.bottom {
		width: 100%;
		height: 50px;
	}
</style>